<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>ANIME搭配SVG实现简约酷炫的登录界面</title>
    <link rel="stylesheet" href="140.css">
</head>

<body>
    <div class="container">
        <div class="left">
            <h1>login</h1>
            <p>欢迎光临, 请输入您的账号和密码进行登录!</p>
        </div>
        <div class="right">
            <!-- SVG提前准备好, 来自互联网 -->
            <svg viewBox="0 0 320 300">
                <defs>
                    <!-- 定义线性渐变 -->
                    <linearGradient inkscape:collect="always" id="linearGradient1" x1="13" y1="193.49992" x2="307"
                        y2="193.49992" gradientUnits="userSpaceOnUse">
                        <stop style="stop-color:#0ff;" offset="0" />
                        <stop style="stop-color:#f0f;" offset="1" />
                    </linearGradient>
                </defs>
                <path
                    d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
            </svg>
            <div class="form">
                <label for="account">账号</label>
                <input type="text" id="account" autocomplete="off">
                <label for="password">密码</label>
                <input type="password" id="password">
                <button id="submit">登录</button>
            </div>
        </div>
    </div>
    <!-- anime是一个轻量的JavaScript动画库,拥有简单而强大的API,可对CSS属性,SVG,DOM和JavaScript对象进行动画 -->
    <!-- 官网 https://www.animejs.cn/ -->
    <!-- 大家可以自己上官网下载,也可以私信找我拿 -->
    <script src="/js/anime.min.js"></script>
    <script src="140.js"></script>
</body>

</html>